<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="system/inc/incHead :: incHead"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content no-margins no-padding">
    <form id="pagerForm" action="/welcome" method="get">
        <input type="hidden" id="pageNum" name="pageNum" value="1"/>
        <input type="hidden" name="numPerPage" th:value="${page?.numPerPage}"/>
        <input type="hidden" name="orderField" th:value="${orderField}"/>
        <input type="hidden" name="orderDirection" th:value="${orderDirection}"/>
        <div class="ibox no-margins no-padding no-borders">
            <div class="ibox-title no-margins no-padding ljFixBoxTitle" style="top:0px;">
                <div class="row p-xs ljRowSearch">
                    <div class="form-group col-md-6">
                        <div class="input-group m-l-sm">
                            <span class="input-group-addon">统计日期:</span>
                            <input th:placeholder="${stsDay}" class="form-control layer-date input-sm ljLayerDay" id="stsDay" name="stsDay"
                                   th:value="${stsDay}"
                                   elem="#stsDay"
                                   format="YYYY-MM-DD">
                        </div>
                    </div>
                    <button class="btn btn-success btn-sm btnPagerForm pull-right" type="button"><i class="fa fa-search">重新检索</i></button>
                </div>
            </div>
            <div class="m-b-sm no-borders" style="height:40px;"></div>
            <div class="ibox-content gray-bg no-padding no-margins no-borders ljScrollbar3" layoutH="65">
                <div class="row no-padding no-margins">
                    <div class="col-sm-3">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <span class="label label-success pull-right">元</span>
                                <h5>今日交易总额</h5>
                            </div>
                            <div class="ibox-content">
                                <small>交易成功/总交易</small>
                                <div class="stat-percent font-bold text-success">
                                    [[${@lj.percent(orderSuccCount, orderSoCount)}]]%&nbsp;-&nbsp;[[${@lj.percent(orderSuccPay, orderSoPay)}]]%</i>
                                </div>
                                <h3 class="m-t-xxs">
                                    [[${orderSuccCount}]]/[[${orderSoCount}]]
                                    ￥[[${#numbers.formatDecimal(@lj.price(orderSuccPay),1,'COMMA',2,'POINT')}]]&nbsp;
                                    ￥[[${#numbers.formatDecimal(@lj.price(orderSoPay),1,'COMMA',2,'POINT')}]]
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <span class="label label-info pull-right">元</span>
                                <h5>今日结算总额</h5>
                            </div>
                            <div class="ibox-content">
                                <small>结算成功/总结算</small>
                                <div class="stat-percent font-bold text-info">
                                    [[${@lj.percent(settleSuccPay, settleSoPay)}]]%</i>
                                </div>
                                <h3 class="m-t-xxs">
                                    [[${settleSuccCount}]]/[[${settleSoCount}]]
                                    ￥[[${#numbers.formatDecimal(@lj.price(settleSuccPay),1,'COMMA',2,'POINT')}]]&nbsp;
                                    ￥[[${#numbers.formatDecimal(@lj.price(settleSoPay),1,'COMMA',2,'POINT')}]]
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <span class="label label-primary pull-right">位</span>
                                <h5>日新增机构</h5>
                            </div>
                            <div class="ibox-content">
                                <small>日新增通过/日增总数</small>
                                <div class="stat-percent font-bold text-navy">[[${@lj.percent(orgOpenSucc, orgOpenAll)}]]%</i></div>
                                <h3 class="m-t-xxs">[[${orgOpenSucc}]]&nbsp;&nbsp;/&nbsp;&nbsp;[[${orgOpenAll}]]</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <span class="label label-danger pull-right">位</span>
                                <h5>日新增商户</h5>
                            </div>
                            <div class="ibox-content">
                                <small>日新增通过/日增总数</small>
                                <div class="stat-percent font-bold text-danger">[[${@lj.percent(shopReigSucc, shopRegiAll)}]]%</i></div>
                                <h3 class="m-t-xxs">[[${shopReigSucc}]]&nbsp;&nbsp;/&nbsp;&nbsp;[[${shopRegiAll}]]</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row no-padding no-margins">
                    <div class="col-sm-12">
                        <div class="ibox">
                            <div class="ibox-title">
                                <h5>分时段统计</h5>
                                <div class="pull-right">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-xs btn-white active">小时</button>
                                    </div>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="row" style="height:300px;">
                                    <div class="col-sm-12">
                                        <div class="flot-chart">
                                            <div class="flot-chart-content" id="flot-dashboard-chart" style="height:300px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div th:replace="system/inc/incBottom :: incBottom"></div>
<!-- Highcharts -->
<script src="/static/hplus/plugins/highcharts/highcharts.js"></script>
<script src="/static/hplus/plugins/highcharts/exporting.js"></script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    $(document).ready(function () {
        $('#flot-dashboard-chart').highcharts({
            chart: {type: 'column'},
            title: {text: '分时段交易汇总'},
            xAxis: {
                categories: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {text: '交易金额 (元)'}
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td><td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: '交易',
                data: [[${orderHour}]]
            }, {
                name: '结算',
                data: [[${settleHour}]]
            }]
        });

        $(".percentValue").each(function () {
            var pv = $(this).html();
            pv = pv.replace("%", "");
            pv = pv.trim();
            if (parseFloat(pv) < 40) {
                $(this).addClass("text-danger");
            }
        });
    });
    /*]]>*/
</script>
</body>
</html>